/// <reference path="_variables-shared.scss" />
/// <reference path="_mixins.scss" />
/// <reference path="../lib/bs4/scss/bootstrap.scss" />


/*.dropdown-menu {
    box-shadow: 0 0 50px 0 rgba(82,63,105, .15);
}*/

// Common
// ==============================================================

.dropdown-menu {
	--shadow-intensity: 0.7;
}

// Add nested dropdown support to BS4
// ==============================================================

.dropdown-group {
	position: relative;

	> .dropdown-item {
		position: relative;
		padding-right: 2rem;

		&:before {
			// make caret
			position: absolute;
			right: $dropdown-item-padding-x / 2;
			top: 50%;
			transform: translateY(-40%);
            color: $gray-500;
			@include fontawesome("\f054", 10px); // chevron-right
		}
	}

	&.show > .dropdown-item {
		color: $dropdown-link-hover-color;
		background-color: $dropdown-link-hover-bg;
	}

	.dropdown-menu {
		position: absolute;
		margin-top: 0 !important;
		top: $dropdown-padding-y * -1;
		left: 100% !important;
		bottom: auto;
		transform: translateX(-2px);
	}
}


// Dropdown toggle
// ==============================================================

.dropdown-toggle:after {
	// better centering
	vertical-align: 0.175em;
}

.dropdown-toggle.no-chevron:after {
	display: none !important;
}


// Dropdown icon color and spacing
// ==============================================================

.dropdown-menu-light-icons .dropdown-item:not(.disabled) > i,
.dropdown-menu-light-icons .dropdown-item:not(.disabled) > .bi {
	color: $dropdown-icon-color;
}

.dropdown-item {
    position: relative;
    display: flex;
    align-items: center;
    font-weight: $dropdown-font-weight;
    font-size: $dropdown-font-size;

	&.disabled {
		cursor: default;
	}

	> i, > .bi, > img {
		margin-left: -0.5rem;
		margin-right: 0.875rem;
	}

	&:not(.disabled) {
		> i, > .bi {
			color: lighten($dropdown-link-color, 15%);
		}

		.dropdown-group.show > & > i,
        .dropdown-group.show > & > .bi,
		&:hover > i,
        &:hover > .bi {
			color: $dropdown-link-hover-color;
		}

		&:active > i,
        &:active > .bi,
		&:focus > i,
        &:focus > .bi {
			color: $dropdown-link-active-color;
		}
	}
}


// Flex Dropdown item (for items with keyboard shortcuts)
// ==============================================================

.dropdown-menu-flex .dropdown-item {
	display: flex;
	align-items: center;

	> span {
		flex-grow: 1;
	}

	> em {
		font-style: normal;
		text-align: right;
		padding-left: 2rem;
		margin-left: auto;
		font-size: 90%;
		opacity: 0.8;
	}
}


// Animate dropdown menus in navbars
// ==============================================================

@mixin sliding-dropdown-menu() {
    opacity: 0;
    display: block;
    visibility: hidden;
    transform: translateY(var(--y, -16px));
    transition: transform 0.2s ease, opacity 0.275s ease-out;
    will-change: transform;

    &.show {
        visibility: visible;
        transform: translateY(0);
        opacity: 1;
    }
}

.navbar.navbar-slide .dropdown-menu {
	@include sliding-dropdown-menu();
}